<!--主页面-->
<script setup>
import LoginOut from "./LoginOut.vue";
import ListVue from "./ListVue.vue";
import {nextTick, provide, ref} from "vue";

// 控制右侧内容体显示的状态
const isRouterAlive = ref(true);
const flushPage = () => {
  // 页面隐藏
  isRouterAlive.value = false
  nextTick(()=>{
    // 页面显示
    isRouterAlive.value = true
  })
}
// 刷新页面 父组件给子组件传递数据
provide('flushPage',flushPage)

</script>

<template>
  <div>
  <el-container>
<!--    左侧菜单-->
    <div class="me-cd">
      <div style="height: 60px ;line-height: 55px ">
        <span style="color: beige" >动力云客管理系统</span>
      </div>

    <el-aside>
<!--      //列表组件-->
        <ListVue/>
    </el-aside>
    </div>
    <el-container>


<!--      右上-->
      <el-header>
          <div style="float: right ;margin-top: 20px ; font-size: 10px">
                <LoginOut/>
          </div>
      </el-header>


<!--      右中-->
      <el-main>
        <router-view v-if="isRouterAlive"/>
      </el-main>



<!--      右下-->
      <el-footer>
        <el-footer>
         <div style=""  >@powernode 小马制作</div>
        </el-footer>

      </el-footer>
    </el-container>
  </el-container>
  </div>
</template>

<style scoped>


.el-footer{
  text-align: center;
  margin-top: auto;
  height: 50px;
}


.me-cd {
    font-size: 20px;
    height: calc(100vh);
    width: 300px;
    text-align: center;
    background: darkslategray;
  }
  .el-header{
    background-color: darkseagreen;
  }
  .el-footer{
    background-color: darkseagreen;
  }
  .el-container{
    height: calc(100vh);
  }
</style>